<template>
    <div class="search-label">
        <span v-if="showTitle" class="label-title">{{ title }}</span>
        <el-select
            v-model="status"
            @change="changeHandle"
            clearable
            collapse-tags
            :disabled="disabled"
            :multiple="multiple"
            size="small"
            placeholder="请选择"
            :style="{width:`${width}px`}">
            <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.dictName"
                :value="item.dictValue"
            >
            </el-option>
        </el-select>
    </div>
</template>
<script>

import {getDicts} from "@/api/common";

export default {
    name: 'SearchMacType',
    props: {
        title: {
            type: String,
            default: '主板型号'
        },
        showTitle: {
            type: Boolean,
            default: true
        },
        multiple: {
            type: Boolean,
            default: true
        },
        defaultValue: {
            type: [Number, String],
            default: undefined
        },
        width: {
            type: [Number, String],
            default: 180
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            status: undefined,
            options: [], //装修风格字典
        }
    },
    watch: {
        defaultValue: {
            immediate: true,
            handler(newVal, oldVal) {
                this.status = newVal
            }
        }
    },
    created() {
        this.getDsDictList()
    },
    methods: {
        /**经营状态*/
        /**
         * 获取自定下拉配置项
         * */
        getDsDictList() {
            getDicts('MacType').then(res => {
                this.options = res.data
            })
        },
        changeHandle(val) {
            let returnVal;
            if (this.multiple) {
                if (val && val.length > 0) {
                    returnVal = val.join();
                } else {
                    returnVal = undefined;
                }
            } else {
                if (val) {
                    returnVal = val;
                } else {
                    returnVal = undefined;
                }
            }
            let names = []
            if(returnVal) {
                returnVal.split(',').forEach(item => {
                    this.options.some(sys => {
                        if(sys.dictValue === item) {
                            names.push(sys.dictName)
                            return true
                        }
                    })
                })
            }
            this.$emit('select', {ids: returnVal, names: names.toString()})
        },
        componentReset() {
            this.status = null;
            this.$emit('select', '')
        }
    }
}
</script>
<style scoped>
.search-label {
    white-space: nowrap;
}
</style>
